<template>
  <div class="splitPanesBox" ref="splitPanesBox">
    <div class="splitPanes" ref="splitPanes">
      <div class="spLeft">
        <div class="spLeft-child" :style="{ 'min-width': dataProcessing('leftChildMinWidth') }">
          <slot name="left"></slot>
        </div>
      </div>
      <div class="spRight" ref="spRight" v-if="isRight">
        <div class="handle-resize" ref="handleResize"></div>
        <div class="spRight-child">
          <slot name="right"></slot>
          <div class="spRight-child-overlay" v-if="isOverlay"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "splitPanes",
  props: {
    splitPanesData: {
      type: Object,
      default: () => ({
        rightWidth: 280, // 右边盒子初始宽度
        rightBoxMinWidth: 100, // 右边盒子最小宽度
        leftBoxMinWidth: 100, // 左边盒子最小宽度
        leftChildMinWidth: 800, // 左边盒子子元素自小宽度（小于这个会出现滚动条）
      }),
    },
    // 是否显示右边盒子
    isShowRightBox: {
      type: Boolean,
      default: () => false,
    },
  },
  components: {},
  computed: {},
  data() {
    return {
      isRight: false,
      isOverlay: false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    dragControllerDiv: function (resizeBox, resizeHandle) {
      resizeBox.style.width = this.dataProcessing("rightWidth");
      // 鼠标按下事件
      resizeHandle.onmousedown = (e) => {
        e.preventDefault();
        let resizeWidth = resizeBox.offsetWidth;
        let splitPanesWidth = this.$refs.splitPanesBox.offsetWidth;
        let startX = e.clientX; // 水平坐标
        this.isOverlay = true;
        // 鼠标拖动事件
        document.onmousemove = (ev) => {
          let moveX = ev.clientX;
          let moveLen = 0;
          moveLen = resizeWidth + (startX - moveX);
          if (
            this.dataProcessing("rightBoxMinWidth") <= moveLen &&
            splitPanesWidth - this.dataProcessing("leftBoxMinWidth") >= moveLen
          ) {
            resizeBox.style.width = moveLen + "px";
          }
        };
        // 鼠标松开事件
        document.onmouseup = () => {
          this.isOverlay = false;
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    },
    // 配置属性
    dataProcessing(val) {
      let newObj = {
        rightWidth: (this.splitPanesData.rightWidth || 280) + "px", // 右边盒子初始宽度
        rightBoxMinWidth: this.splitPanesData.rightBoxMinWidth || 100, // 右边盒子最小宽度
        leftBoxMinWidth: this.splitPanesData.leftBoxMinWidth || 100, // 左边盒子最小宽度
        leftChildMinWidth: (this.splitPanesData.leftChildMinWidth || 800) + "px",
      };
      return newObj[val];
    },
  },
  watch: {
    isShowRightBox: {
      immediate: true,
      handler(newVal) {
        this.isRight = newVal;
        if (newVal) {
          this.$nextTick(() => {
            this.dragControllerDiv(this.$refs.spRight, this.$refs.handleResize);
          });
        }
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.splitPanesBox {
  height: 100%;
  width: 100%;
}
.splitPanes {
  height: 100%;
  width: 100%;
  display: flex;
  .spLeft {
    flex: 1;
    height: 100%;
    overflow: auto;
    .spLeft-child {
      height: 100%;
      overflow: auto;
    }
  }
  .spRight {
    height: 100%;
    position: relative;
    .handle-resize {
      background: #f7f8fa;
      border-left: 1px solid #e0e0e0;
      border-right: 1px solid #e0e0e0;
      cursor: col-resize;
      display: flex;
      height: 100%;
      justify-content: center;
      margin-left: unset;
      width: 6px;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      text-align: center;
      z-index: 1;
      &::before {
        background-color: transparent;
        background-image: url("@/assets/49d5e968f90dd799d2fb.svg");
        background-repeat: no-repeat;
        border: none;
        content: "";
        height: 16px;
        left: 0;
        margin-left: unset;
        opacity: 1;
        position: absolute;
        top: 50%;
        width: 6px;
        z-index: 1;
      }
    }
    .spRight-child {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      position: relative;
      .spRight-child-overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
      }
    }
  }
}
</style>
